<template>
  <div>
    <el-row style="margin-top: 20px;">
      <el-col :span="12" :offset="4">
        <el-form :model="formData" :rules="rules" ref="formData" label-width="110px" class="demo-formData">
          <el-form-item label="社团编号" prop="id">
            <el-input v-model="formData.id" disabled></el-input>
          </el-form-item>
          <el-form-item label="社团名称" prop="name">
            <el-input v-model="formData.name" disabled></el-input>
          </el-form-item>
          <el-form-item label="社团简介" prop="clubIntroduce">
            <el-input
              type="textarea"
              placeholder="请输入内容(100字内)"
              :maxlength="100"
              :rows="3"
              v-model="formData.clubIntroduce"
              show-word-limit>
            </el-input>
          </el-form-item>
          <el-form-item label="社团详情" prop="clubDescribe">
            <el-input
              type="textarea"
              placeholder="请输入内容(200字内)"
              :maxlength="200"
              :rows="4"
              v-model="formData.clubDescribe"
              show-word-limit>
            </el-input>
          </el-form-item>
          <el-form-item label="社团公告" prop="clubNotice">
            <el-input
              type="textarea"
              placeholder="请输入内容(200字内)"
              :maxlength="200"
              :rows="4"
              v-model="formData.clubNotice"
              show-word-limit>
            </el-input>
          </el-form-item>
          <el-form-item class="button_submit">
            <el-button type="primary" @click="submitForm('formData')">立即修改</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {addClub} from '@/api/club'
import {getClub, updateClub} from "../../../api/club";

export default {
  name: "ClubInformation",
  data() {
    return {
      imageUrl: '',
      city: {},
      clubId: null,
      formData: {
        id: '',
        name: '',
        clubIntroduce: '',
        clubDescribe: '',
        clubNotice: '',
        clubStatus: 0,
      },
      rules: {
        name: [
          {required: true, message: '请输入社团名称', trigger: 'blur'}
        ],
        clubIntroduce: [
          {required: true, message: '请输入社团简介', trigger: 'blur'}
        ],
        // administrator: [
        //   {required: true, message: '请审输入核人ID'},
        //   {type: 'number', message: 'ID号码必须是数字'}
        // ],
        clubDescribe: [
          {required: true, message: '请输入社团详情', trigger: 'blur'}
        ]
      }
    }
  },
  components: {
    // headTop
  },
  created() {
    // this.getClubName();
    this.clubId = this.$route.params.clubId;
    this.getClub();
  },
  methods: {
    // async getClubName() {
    //   await getClublist(this.formData).then(res => {
    //     console.log(res[0].clubId);
    //     this.clubList = res;
    //     console.log(this.clubList[0].clubName);
    //   })
    // },

    // handleAvatarSuccess(res, file) {
    //   this.imageUrl = res;
    //   this.formData.photo=res;
    // },
    // beforeAvatarUpload(file) {
    //   const isRightType = (file.type === 'image/jpeg') || (file.type === 'image/png');
    //   const isLt2M = file.size / 1024 / 1024 < 2;
    //
    //   if (!isRightType) {
    //     this.$message.error('上传头像图片只能是 JPG 格式!');
    //   }
    //   if (!isLt2M) {
    //     this.$message.error('上传头像图片大小不能超过 2MB!');
    //   }
    //   return isRightType && isLt2M;
    // },
    getClub() {
      getClub({
        id: this.clubId
      }).then(res => {
        this.formData = res.data;
        console.log("社团信息：", this.formData)
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
          if (valid) {
            Object.assign(this.formData)
            console.log("aaa");
            console.log(this.formData);
            this.formData.createTime = "";
            this.formData.updateTime = "";
            updateClub(this.formData).then(res => {
              console.log(res.successed)
              if (res.code == 200) {
                console.log("bbb");
                this.$message({
                  type: 'success',
                  message: "更新成功"
                });
                this.$router.push({path: `/managerHome/clubManage`})
                // this.formData = {
                //   name: '',
                //   clubStatus: 0,
                //   clubIntroduce: '',
                //   clubDescribe: '',
                //   clubNotice: ''
                // };
                // location.reload();
              } else {
                this.$message({
                  type: 'error',
                  message: "更新失败"
                });
              }
              // this.$router.push({path: `/managerHome/clubManage`})
            })

          } else {
            this.$notify.error({
              title: '错误',
              message: '请检查输入是否正确',
              offset: 100
            });
            return false;
          }
        }
      )
      ;
    }
  }
}
</script>

<style Lang="less" scoped>
.button_submit {
  text-align: center;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.avatar {
  width: 120px;
  height: 120px;
  display: block;
}

.el-table .info-row {
  background: #c9e5f5;
}

.el-table .positive-row {
  background: #e2f0e4;
}
</style>
